<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import {
  HxqDateRangeTwo,
  HxqDateRangeSingle,
  //   HxqDateCalendar,
} from "vue-mobile-hxq";
const searchTime2 = ref([new Date(2013, 5, 4), new Date(2013, 7, 8)]);

const dataSource = reactive([
  {
    name: "v-model",
    param: "string",
    desc: "双向绑定值",
  },
]);

const searchTime1 = ref(["2013/03/01", "2013/06/01"]);
</script>
<template>
  <div class="public-flex-box">
    <div class="public-phone-title">单个时间选择时间范围筛选</div>
    <div class="public-usage-box">
      <hxq-date-range-single v-model="searchTime1"></hxq-date-range-single>
    </div>
  </div>

  <div class="public-flex-box">
    <div class="public-phone-title">以日历的形式选择时间范围筛选</div>
    <div class="public-usage-box">
      <hxq-date-range-two
        :showTitle="false"
        :minDate="new Date(1999, 0, 1)"
        v-model="searchTime2"
      ></hxq-date-range-two>
    </div>
  </div>
</template>

<style lang="scss">
.van-overlay {
  position: absolute;
}
.van-popup {
  position: absolute;
  width: 100%;
  right: 24px;
}
</style>
